<template>
  <el-drawer v-model="drawerVisible" direction="rtl" @opened="handleOpened" @close="handleClose">
    <template #header>
      <h2 style="font-weight: bold">人员职位管理</h2>
    </template>
    <template #default>
      <el-descriptions class="margin-top" title="职位信息" :column="1" :size="'large'" border>
        <el-descriptions-item width="100px">
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              姓名
            </div>
          </template>
          {{ currentMember.value.memName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              电话
            </div>
          </template>
          {{ currentMember.value.memNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <office-building />
              </el-icon>
              现居地址
            </div>
          </template>
          {{ currentMember.value.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <BellFilled />
              </el-icon>
              当前角色
            </div>
          </template>
          <el-tag v-if="role">{{ role.roleName }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Histogram />
              </el-icon>
              职位选择
            </div>
          </template>
          <div class="select-div">
            <el-select
              v-model="currentRoleId"
              style="width: 200px"
              placeholder="请选择要修改的职位"
            >
              <el-option
                v-for="item in filteredRoles"
                :key="item.roleName"
                :label="item.roleName"
                :value="item.roleId"
              >
                <el-tooltip placement="top">
                  <template #content> {{ item.remarks }} </template>
                  <span style="font-size: 15px">{{ item.roleName }}</span>
                </el-tooltip>
              </el-option>
            </el-select>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Histogram />
              </el-icon>
              工作地址
            </div>
          </template>
          <div class="select-div">
            <grid-cascader></grid-cascader>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { useMemberStore } from '@/stores/member/member.js'
import { storeToRefs } from 'pinia'
import { BellFilled, Histogram, Iphone, OfficeBuilding, User } from '@element-plus/icons-vue'
import { useRoleStore } from '@/stores/role/role.js'
import { computed, ref } from 'vue'
import { showErrorMsg, showSuccessMsg } from '@/utils/alterMessage.js'
import GridCascader from '@/components/utils/GridCascader.vue'
import { useGridStore } from '@/stores/grid/grid.js'

const memberStore = useMemberStore()
const { drawerVisible, currentMember } = storeToRefs(memberStore)
const roleStore = useRoleStore()
const { roles, role } = storeToRefs(roleStore)
const gridStore = useGridStore()
const { gridValue } = storeToRefs(gridStore)
let currentRoleId = ref('')

const filteredRoles = computed(() => {
  return roles.value.filter((item) => item.roleId !== (role.value ? role.value.roleId : -1))
})

const cancelClick = () => {
  currentRoleId.value = null
  gridStore.clearData()
  drawerVisible.value = false
}

const confirmClick = async () => {
  if (!currentRoleId.value) {
    showErrorMsg('请选择要修改的职位')
    return
  }
  if (gridValue.value.length === 0) {
    showErrorMsg('请选择工作地址')
    return
  }
  try {
    let res = await memberStore.updateMember(
      memberStore.currentMember.value.memId,
      currentRoleId.value,
      gridValue.value.join('/')
    )
    if (res) {
      showSuccessMsg('人员职位更改成功')
      drawerVisible.value = false
      currentRoleId.value = null
      gridStore.clearData()
      location.reload()
    } else {
      // 这里假设updateMember在失败时返回false，如果没有明确返回，可能需要调整updateMember的实现
      showErrorMsg('更新人员职位失败')
    }
  } catch (error) {
    showErrorMsg('更新过程中发生错误')
    console.error(error)
  }
}

const handleOpened = async () => {
  await roleStore.getRoles()
  roleStore.setRole(
    roles.value.find((item) => item.roleId === memberStore.currentMember.value.roleId)
  )
  gridValue.value = memberStore.currentMember.value.workProvince.split('/')
}
const handleClose = () => {
  currentRoleId.value = null
  roleStore.setRole(null)
}
</script>

<style scoped lang="scss">
.cell-item {
  gap: 5px;
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  margin: 40px;
}
</style>
